<script setup lang="ts">
import { inject, Ref } from 'vue';

defineProps({
  asideButtonVisible: { type: Boolean, default: false }
});

const asideVisible = inject<Ref<boolean>>('asideVisible');

const toggleAside = () => {
  if (asideVisible) {
    asideVisible.value = !asideVisible.value;
  }
};
</script>

<template>
  <div class="topNav">

    <span v-if="asideButtonVisible" class="asideButton" @click="toggleAside">
      <transition name="fade">
        <svg v-if="asideVisible">
          <use xlink:href="#icon-close"></use>
        </svg>
        <svg v-else>
          <use xlink:href="#icon-menu"></use>
        </svg>
      </transition>
    </span>

    <div class="logo">
      <router-link to="/">
        <svg class="icon">
          <use xlink:href="#icon-flash"></use>
        </svg>
      </router-link>
    </div>

    <ul class="menu">
      <li>
        <a href="https://github.com/dongdong12138/FlashUI" target="_blank">
          <svg class="icon">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
      </li>
      <li>
        <a href="https://gitee.com/barrydong/flash-ui" target="_blank">
          <svg class="icon">
            <use xlink:href="#icon-gitee"></use>
          </svg>
        </a>
      </li>
    </ul>

  </div>
</template>

<style scoped lang="scss">
.topNav {
  width: 100vw;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: flex; justify-content: center; align-items: center;
  padding: 16px;
  position: relative;
  // position: fixed; left: 0; top: 0;
  // z-index: 10;
}

.asideButton {
  display: none;
  width: 24px; height: 24px;
  overflow: hidden;
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  > svg { width: 24px; height: 24px; }
}

.logo {
  margin-right: auto;
  > a {
    display: inline-block;
    > svg { font-size: 3em; }
  }
}

.menu {
  display: flex;
  > li {
    &:last-child { margin-left: 10px; }
    > a {
      display: inline-block;
      > svg {
        width: 24px; height: 24px;
        vertical-align: middle;
      }
    }
  }
}

@media (max-width: 500px) {
  .logo { margin: 0 auto; }
  .menu { display: none; }
  .asideButton { display: inline-block; }
}
</style>
